<template>
    <div>
        <el-form ref="searchForm" :inline="true" :model="searchForm">
            <el-form-item label="客户名称：">
                <el-input v-model.trim="searchForm.nickName" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getAgentListHandle">搜索</el-button>
                <el-button type="success" @click="showAddNewAgentHandle">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tbpg.tableData" border >
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="nickName" label="代理商名称"></el-table-column>
            <el-table-column prop="cardCount" label="下属成员"></el-table-column>
            <el-table-column prop="accountName" label="账号"></el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column prop="createName" label="添加人"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">                    
                    <el-button type="text" size="small" @click="showEditAgentInfo(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="deleteHandle(scope.row)">删除</el-button>
                    <el-button type="text" size="small" @click="showResetPassworDialog(scope.row)">重置密码</el-button>
                    <!-- <el-button type="text" size="small" v-if="scope.row.smsState == 1" @click="updateSMSPermissions(scope.row.id, 2)">取消授权</el-button>
                    <el-button type="text" size="small" v-else-if="scope.row.smsState == 2"  @click="updateSMSPermissions(scope.row.id, 1)">短信授权</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tbpg.currentPage"
            :page-sizes="[15, 50, 100, 500]"
            :page-size="tbpg.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tbpg.total">
        </el-pagination> 
        <el-dialog :title="title" :visible.sync="addNewAgentVisibale" width="600px" @close="cancel" :close-on-click-modal="false">
            <el-form ref="newAgentForm" :model="newAgentForm" :rules="newAgentFormRules" label-width="120px">
                <el-form-item label="客户名称：" prop="nickName">
                    <el-input v-model.trim="newAgentForm.nickName" clearable></el-input>
                </el-form-item>
                <el-form-item label="账号：" prop="accountName">
                    <el-input v-model.trim="newAgentForm.accountName" :disabled="accountDisabled" clearable></el-input>
                </el-form-item>
                <el-form-item v-if="addFlag" label="密码：" prop="pwd">
                    <el-input v-model.trim="newAgentForm.pwd" show-password clearable></el-input>
                </el-form-item>
                <el-form-item label="手机号：" prop="phone">
                    <el-input v-model.trim="newAgentForm.phone" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="addOrEditNewAgentHandle">确 定</el-button>
            </div>   
        </el-dialog> 
        <el-dialog
            title="提示"
            :visible.sync="confirmVisible"
            width="30%">
            <span>确定要重置密码吗</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="confirmVisible = false">取 消</el-button>
                <el-button type="primary" @click="resetPassword">确 定</el-button>
            </span>
        </el-dialog>        
    </div>
</template>

<script>
import {addNewAgent, getAgentList, updateAgentInfo, doResetPassword, doUpdateSMSPermissions, deleteCustomer} from '@/api/customers.js'
import common from '@/utils/common.js'
export default {
    data(){
        return {
            searchForm: {
                nickName: ''
            },
            tbpg: {
                tableData: [],
                currentPage: 1,
                pageSize: 15,
                total: 0                 
            },            
            addNewAgentVisibale: false,
            title: '新增客户',
            accountDisabled: false,
            newAgentForm: {
                nickName: '',
                phone: '',
                accountName: '',
                pwd: ''
            },
            addFlag: true,
            currentId: '',
            newAgentFormRules: {
                nickName: [{required: true, message: '请输入代理商名称', trigger: 'blur'}],
                accountName: [{required: true, validator: this.checkAccount, trigger: 'blur'}],
                pwd: [{required: true, validator: this.checkPassword, trigger: 'blur'}],
                phone: [{required: true, validator: this.checkPhone, trigger: 'blur'}]
            },
            confirmVisible :false,
            id_forResetPassword:'',
        }
    },
    methods: {
        cancel(){
            
            for(let key in this.newAgentForm){                
                this.newAgentForm[key] = null;
            }
            this.addNewAgentVisibale = false;
            this.$refs.newAgentForm.resetFields(); 
        },
        getAgentListHandle($event){
            common.resetCurrentPage(this, $event, 'tbpg');
            var data = common.getRequestParams(this, 'tbpg', this.searchForm);  
            getAgentList(data).then(res => {
                common.listCallback(this, res, 'tbpg');
            })
        },
        showAddNewAgentHandle(){
            this.title = '新增客户';

            for(let key in this.newAgentForm){                
                this.newAgentForm[key] = null;
            }

            this.addNewAgentVisibale = true;
            this.accountDisabled = false;
            this.addFlag = true;
        },
        showEditAgentInfo(row){
            if(row){
                this.title = '修改客户';
                this.addNewAgentVisibale = true;
                this.accountDisabled = true;
                this.addFlag = false;
                this.currentId = row.id;
                for(var key in this.newAgentForm){
                    if(typeof(row[key]) == 'string'){
                        this.newAgentForm[key] = (row[key]).replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
                    }else{
                        this.newAgentForm[key] = row[key];
                    }                
                }
            }
            
        },
        addOrEditNewAgentHandle(){
            this.$refs.newAgentForm.validate(valid => {
                if(valid){
                    var data = this.newAgentForm;     
                    if(this.addFlag){
                        addNewAgent(data).then(res => {
                            if(res.data.code == 200){
                                callback(res)
                                this.$message.success(res.data.message);
                                this.getAgentListHandle();
                            }else{
                                this.$message.error(res.data.message);
                            }
                        })
                    }else{
                        data.id = this.currentId;
                        updateAgentInfo(data).then(res => {
                            if(res.data.code == 200){
                                callback(res)
                                this.$message.success(res.data.message);
                                this.getAgentListHandle();
                            }else{
                                this.$message.error(res.data.message);
                            }
                        })                        
                    }
                }
                var _this = this;
                function callback(res){
                    if(res.data.code == 200){
                        _this.getAgentListHandle();
                        _this.addNewAgentVisibale = false;
                        
                    }else{
                        _this.$message.error(res.data.message)
                    }                     
                }
            })
        },     
        showResetPassworDialog(row){
            this.confirmVisible = true;
            this.id_forResetPassword = row.id;
        },
        deleteHandle(row) {
            var _this = this;
            let data = {
                id: row.agentId
            }
            _this.$confirm('确定删除吗？','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteCustomer(data).then(res => {
                    if(res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: res.data.message
                        });
                        this.getAgentListHandle();
                    }
                    else {
                        this.$message.error(res.data.message)
                    }
                })
            })
            
        },

        resetPassword(){
            doResetPassword({id:this.id_forResetPassword}).then(res => {
                if(res.data.code == 200){
                    this.$message.success(res.data.message);
                    this.confirmVisible = false;
                    this.getAgentListHandle();
                }else{
                    this.$message.error(res.data.message);
                }
            })

        },

        updateSMSPermissions(id, state){
            let data = {
                id: id,
                smsState: state,
            }

            doUpdateSMSPermissions(data).then(res => {
                if(res.data.code == 200){
                    this.$message.success(res.data.message);
                    this.getAgentListHandle();
                }else{
                    this.$message.error(res.data.message);
                }
            })
        },

        handleSizeChange(val){
            this.tbpg.pageSize = val;
            this.getAgentListHandle();
        },
        handleCurrentChange(val){
            this.tbpg.currentPage = val;
            this.getAgentListHandle();
        }  
    },
    created () {
        this.getAgentListHandle()
    }  
}
</script>

<style lang="scss" scoped>

</style>

